<template>
	<el-row>
		<el-col :span="24">
			<div class="top-navigation-bar" ref="navigation">
				<div class="name-title" style="display: flex;align-items: center;">
					<img src="../static/img/logo.png" style="width:3.4rem;height:3.4rem;margin-right: 10px;" /> Deveco
					UI
				</div>
				<div>

				</div>
			</div>
		</el-col>

		<el-col :xs="4" :sm="4" :lg="4" :xl="3" class="side-navigation"
			:style="{'height':height+'px','overflow': 'auto'}">
			<el-menu class="el-menu-vertical-demo" :default-active="current">
				<el-menu-item @click="jumpInterface(item.path)" :index="index.toString()"
					v-for="(item,index) in routersData" :key="index" v-show="item.name">
					<span>{{item.title}}</span>
				</el-menu-item>
			</el-menu>
		</el-col>
		<el-col :xs="20" :sm="20" :xl="21" :style="{'height':height+'px','overflow': 'auto'}">
			<el-row>
				<el-col :span="24" class="content-box" :style="{'height':height+'px','overflow': 'scroll'}">
					<el-backtop :bottom="100" :visibility-height="50"></el-backtop>
					<router-view></router-view>
					<div class="filing-information">
						<a class="text-color" href="https://beian.miit.gov.cn" target="_blank">豫ICP备20001402号-3</a>
						<span class="text-color">©2022&nbsp;Deveco Ui&nbsp;</span>
					</div>
					<!-- <el-backtop :visibility-height="1" :right="100" :bottom="100" /> -->
				</el-col>
				<!-- 			<el-col :span="7" class="right-phone" :style="{'height':height+'px'}">
					<div class="phone-img">
						<iframe data-v-7bced0d0="" scrolling="auto" frameborder="0" src="https://h5.uviewui.com/#/"
							id="demo-modal" class="iframe"></iframe>
						<iframe data-v-7bced0d0="" scrolling="auto" frameborder="0" src="http://localhost:8081/#/"
						id="demo-modal" class="iframe"></iframe>
					</div>
				</el-col> -->
			</el-row>
		</el-col>


	</el-row>
</template>

<script>
	import router from '@/router/index.js'
	import {
		watchEffect
	} from 'vue'
	export default {
		name: 'side-navigation',


		data() {
			return {
				routersData: [],
				activeIndex2: '',
				height: 0,
				fullScreen: false,
				current: '', //默认选中的小标
			}
		},

		created() {

			this.routersData = router.routersData;
			// console.log(this.$route,'我的天啊')
			// this.getNavIndex(this.$route);
		},
		mounted() {
			watchEffect(() => {
					if (this.$route.path !== '/') this.getNavIndex(this.$route.path);
				}),
				this.getPageSize();
			window.onresize = () => {
				return (() => {
					this.getPageSize();
					if (!this.checkFull()) {
						//要执行的动作
						this.fullScreen = false;
					}
				})()
			}
		},
		methods: {
			//计算当前选中查看内容导航栏下标
			getNavIndex(route) {
				this.routersData.forEach((item, index) => {
					if (item.path === route) this.current = index.toString();
				})
			},
			//路由跳转
			jumpInterface(path) {
				this.$router.push(path)
			},
			// //获取界面可使用高度
			getPageSize() {
				let navHight = this.$refs.navigation.offsetHeight;
				let screen_height = document.documentElement.clientHeight;
				this.height = screen_height - navHight;
			},
			checkFull() {
				//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
				//火狐浏览器
				var isFull = document.mozFullScreen ||
					document.fullScreen ||
					//谷歌浏览器及Webkit内核浏览器
					document.webkitIsFullScreen ||
					document.webkitRequestFullScreen ||
					document.mozRequestFullScreen ||
					document.msFullscreenEnabled
				if (isFull === undefined) {
					isFull = false
				}
				return isFull;

			},

		}

	}
</script>
<style type="text/css" scoped="scoped">
	.side-navigation {
		text-align: center;
		border-right: 1px solid #dcdfe6;
	}

	.el-menu-vertical-demo {
		border: none;
	}

	.filing-information {
		text-align: center;
		margin: 20px;
	}

	.text-color {
		color: #bbb;
		font-size: 14px;
		margin: 0 10px;
	}

	/* 顶部导航样式 */
	.top-navigation-bar {
		padding: 0 40px;
		height: 64px;
		border-bottom: 1px solid #dcdfe6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name-title {
		font-size: 1.3rem;
		font-weight: 600;
		color: #2c3e50;
		/* position: relative; */
	}

	/*全局滚动条样式*/
	.side-navigation::-webkit-scrollbar {
		width: 0px;
	}

	.side-navigation::-webkit-scrollbar-thumb {
		width: 0px;
	}

	.side-navigation:hover::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: #b6b6b6;
	}

	.side-navigation:hover::-webkit-scrollbar {
		width: 5px;
		background-color: #F0F0F0;
	}


	/*全局滚动条样式*/
	.content-box::-webkit-scrollbar {
		width: 0px;
	}

	.content-box::-webkit-scrollbar-thumb {
		width: 0px;
	}

	/* 	.content-box:hover::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: #b6b6b6;
	}
	
	.content-box:hover::-webkit-scrollbar {
		width: 5px;
		background-color: #F0F0F0;
	} */

	/*全局滚动条样式结束*/

	.content-box {
		padding: 20px;
	}

	.phone-img {
		/* 380 780 */
		min-width: 330px;
		height: 677px;
		background-image: url(../static/img/huawei_model.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#demo-modal {
		width: 290px;
		height: 580px;
	}

	.right-phone {
		/* background-color: #42B983; */
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
</style>
